<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>采购对账</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../../../component/elementUI/index.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <style>
      .el-input.is-disabled .el-input__inner {
        color: #000;
        background-color: #fff;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <el-form :inline="true" :form="form">
        <el-form-item>
          <el-button type="primary" @click="Add">商家对账申请</el-button>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="form.Purchase_Order_SerialNumber"
            clearable
            placeholder="请输入对账单名称"
          />
        </el-form-item>
        <el-form-item v-if="!isSupplier">
          <el-input
            v-model="form.Supplier_SerialNumber"
            placeholder="请输入供应商名称"
          ></el-input>
          <!-- <el-select
            v-model.trim="form.Supplier_SerialNumber"
            clearable
            style="width: 100%"
            placeholder="请选择供应商"
          >
            <el-option
              v-for="item in Supplier"
              :key="item.Supplier_SerialNumber"
              :label="item.Supplier_Name"
              :value="item.Supplier_SerialNumber"
            ></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item>
          <el-date-picker
            prefix-icon="el-icon-date"
            v-model="form.Purchase_Date"
            clearable
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <!-- <el-select
          v-model.trim="form.Supplier_SerialNumber"
          clearable
          style="width: 5%"
          placeholder="全部"
        >
          <el-option
            v-for="item in Supplier"
            :key="item.Supplier_SerialNumber"
            :label="item.Supplier_Name"
            :value="item.Supplier_SerialNumber"
          ></el-option>
        </el-select> -->
        <el-form-item>
          <el-button type="primary" @click="onSerach">查询</el-button>
        </el-form-item>
        <el-form-item>
          <yl-button
            type="success"
            :data="ExportData"
            :loading="loading"
            @click="Export(form)"
            >采购订单导出</yl-button
          >
        </el-form-item>
      </el-form>
      <el-tabs v-model="form.Row_Status" type="card" @tab-click="onSerach">
        <el-tab-pane label="全部" name="-"></el-tab-pane>
        <el-tab-pane label="审核中" name="0"></el-tab-pane>
        <el-tab-pane label="已通过" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <el-table
        :data="tableData.slice((form.page-1)*form.limit,form.page*form.limit)"
        stripe
        border
        height="calc(100vh - 210px)"
        style="width: 100%"
      > <el-table-column
          align="center"
          type="index"
          label="序号"
          width="50"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="Purchase_Name"
          width="300"
          show-overflow-tooltip
          label="对账单名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="Purchase_Order_SerialNumber"
          width="300"
          show-overflow-tooltip
          label="对账单编号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="Supplier_Name"
          width="150"
          show-overflow-tooltip
          label="供应商"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="Purchase_Date"
          width="300"
          show-overflow-tooltip
          label="提交日期"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="ID_Name"
          width="300"
          show-overflow-tooltip
          label="对账人"
        ></el-table-column>
        <!-- <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="下单地址"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="下单手机号"
        ></el-table-column> -->
        <!-- <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="商品名称"
        ></el-table-column> -->
        <!-- <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="数量"
        ></el-table-column> -->
        <!-- <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="一件代发单价（元）"
        ></el-table-column> -->
        <el-table-column
          align="center"
          prop="Purchase_Amount01"
          width="300"
          show-overflow-tooltip
          label="一件代发总价（元）"
        >
          <template v-slot="{row}">
            {{thousands(row.Purchase_Amount01)}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="Purchase_Amount"
          width="300"
          show-overflow-tooltip
          label="实际对账金额（元）"
        ></el-table-column>
        <!-- <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="活动单价"
        ></el-table-column> -->
        <el-table-column
          align="center"
          prop="Receipt_Quantity"
          width="300"
          show-overflow-tooltip
          label="销售总价"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="总利润"
        >
          <template slot-scope="scope">
            {{ scope.row.Receipt_Quantity - scope.row.Purchase_Amount}}
            <!-- 假设单位是“件”，可按需修改 -->
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="利润率（%）"
        >
          <template slot-scope="scope">
            {{ (formatRatio(scope.row.Receipt_Quantity,
            scope.row.Purchase_Amount))}}
            <!-- 假设单位是“件”，可按需修改 -->
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="发票号"
        ></el-table-column> -->
        <!-- <el-table-column
          v-if="!isSupplier"
          align="center"
          prop="Amount"
          width="120"
          show-overflow-tooltip
          label="销售金额"
        >
          <template v-slot="{row}"> {{thousands(row.Amount)}} </template>
        </el-table-column> -->

        <!-- <el-table-column
          align="center"
          prop="Paid_Amount"
          width="120"
          show-overflow-tooltip
          label="已付金额"
        >
          <template v-slot="{row}"> {{thousands(row.Paid_Amount)}} </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          show-overflow-tooltip
          label="未付金额"
        >
          <template v-slot="{row}">
            <span
              :style="{color:accSub(row.Purchase_Amount,row.Paid_Amount)==0?'':'#F56C6C'}"
              >{{thousands(accSub(row.Purchase_Amount,row.Paid_Amount))}}</span
            >
          </template>
        </el-table-column> -->

        <!-- <el-table-column
          align="center"
          width="120"
          show-overflow-tooltip
          label="审核状态"
        >
          <template v-slot="{row}">
            {{row.Row_Status=='99'?'审核中':row.Row_Status=='88'?'已拒绝':'已通过'}}
          </template>
        </el-table-column> -->
        <el-table-column
          prop="Row_Status.charAt(1)"
          label="发票状态"
          width="120"
          :filters="[{ text: '未上传发票', value: '0' }, { text: '已上传发票', value: '1' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.Row_Status.charAt(1)=='0'?'':'success'"
              disable-transitions
            >
              {{scope.row.Row_Status.charAt(1)=='0'?'未上传发票':'已上传发票'}}
            </el-tag>
          </template>
        </el-table-column>

        <!-- <el-table-column align="center" width="120" label="发票状态">
          <template v-slot="{row}">
            <el-tag :type="row.Row_Status.charAt(1)=='0'?'':'success'"
              >{{row.Row_Status.charAt(1)=='0'?'未上传发票':row.Row_Status.charAt(1)=='1'?'已上传发票':''}}</el-tag
            >
          </template>
        </el-table-column> -->

        <el-table-column
          prop="Row_Status"
          label="打款状态"
          width="100"
          :filters="[{ text: '已付款', value: '1' }, { text: '未付款', value: '0' }]"
          :filter-method="filterTag1"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.Row_Status.charAt(0)=='0'? 'warning':'success'"
              disable-transitions
              >{{Type(scope.row.Row_Status)}}</el-tag
            >
          </template>
        </el-table-column>

        <!-- <el-table-column align="center" width="100" label="打款状态">
          <template v-slot="{row}">
            <el-tag
              :type="row.Row_Status.charAt(0)=='0'?'':row.Row_Status.charAt(0)=='1'?'warning':'success'"
              >{{Type(row.Row_Status)}}</el-tag
            >
          </template>
        </el-table-column> -->

        <el-table-column
          align="center"
          fixed="right"
          prop="Row_Status"
          width="180"
          label="操作"
        >
          <template v-slot="{row}">
            <el-dropdown
              v-if="row.Row_Status=='99'"
              size="small"
              trigger="click"
              @command="handle($event,row)"
            >
              <el-button size="small" type="primary">
                审核<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="true">通过</el-dropdown-item>
                <el-dropdown-item command="false">拒绝</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <template>
              <el-button
                v-if="!isSupplier&&row.Row_Status!='99'"
                :disabled="parseFloat(row.Purchase_Amount)==parseFloat(row.Paid_Amount)"
                :type="parseFloat(row.Purchase_Amount)==parseFloat(row.Paid_Amount)?'info':'success'"
                size="small"
                @click="Edit(row)"
                >付款</el-button
              >
              <el-dropdown size="small" trigger="click">
                <el-button size="small" type="primary">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-if="!isSupplier"
                    style="margin-bottom: 5px"
                  >
                    <el-button type="primary" @click="Show(row)" size="small"
                      >详情查看</el-button
                    >
                  </el-dropdown-item>
                  <el-dropdown-item style="margin-bottom: 5px">
                    <el-button v-if="row.Row_Status!='99'"
                      :type="row.Row_Status.charAt(0)=='2'?'success':'success'"
                      @click="Invoice(row)"
                      size="small"
                      >上传发票</el-button
                    >
                  </el-dropdown-item>
                  <!-- <el-dropdown-item style="margin-bottom: 5px">
                    <yl-detail  v-if="row.Row_Status!='99'"
                      type="danger"
                      :data="ExportDetailData"
                      @click="ExportDetail(row)"
                      >导出明细</yl-detail
                    >
                  </el-dropdown-item> -->
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 5px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10 ,20, 30, 50, 100]"
        :page-size="form.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
      <show-detail
        :visible.sync="dialogVisible"
        :data="Purchase_Order"
      ></show-detail>
      <edit
        :visible.sync="dialogEditVisible"
        :data="Purchase_Order"
        @success="getList(form)"
      ></edit>
      <invoice
        :visible.sync="dialogInvoiceVisible"
        :data="Purchase_Order"
        @success="getList(form)"
      ></invoice>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script
      type="text/javascript"
      src="../../../utils/jquery.cookie.js"
    ></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script
      type="text/javascript"
      src="../../../component/elementUI/index.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../component/component.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../utils/FileSaver.min.js"
    ></script>
    <script type="text/javascript" src="../../../utils/FileSaver.js"></script>
    <script
      type="text/javascript"
      src="../../../utils/xlsx.full.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../utils/xlsx.core.min.js"
    ></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
  </body>
</html>
